<!DOCTYPE html>
<link rel="stylesheet" href="{{ url_for('static', filename='css/materialize.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="{{ url_for('static', filename='js/materialize.js') }}"></script>

<title>Blockendance</title>
{% if name %}
<h1>Hello {{ name }}, enter the details of the class</h1>
{% endif %}

<body class="blue-grey lighten-4">
    <div class="row">
        <form class="col s12" id="form" name="form" action="/" method="post">
            <div class="row">
                {% if not name %}
                <div class="input-field col s12">
                    <label for="name">Your name</label>
                    <input type="text" id="name" name="name" value="">
                </div>
                {% endif %}
                <div class="input-field col s12">
                    <label for="number">Total Number of Students</label>
                    <input type="number" id="number" name="number" value="50">
                </div>
                <div class="input-field col s12">
                    <select id="course" name="course">
                        <option value="IC">IC</option>
                        <option value="IT">IT</option>
                        <option value="IB">IB</option>
                    </select>
                    <label for="course">Course Code</label>
                </div>
                <div class="input-field col s12">
                    <label for="year">Enrollment Year</label>
                    <input type="text" id="year" name="year" value="2k16">
                </div>
                <div class="input-field col s12">
                    <label for="date">Date</label>
                    <input class="datepicker" type="text" id="date" name="date" value="{{ date }}">
                </div>
                <button class="btn waves-effect waves-light" type="submit" name="action">Next
                    <i class="material-icons right">send</i>
                </button>
            </div>

        </form>
    </div>

    <script type="text/javascript">
    var form = document.getElementById("form") || null;
    if(form) {
        form.action = window.location.pathname;
    }
    var dpelem = document.querySelector('.datepicker');
    var dpinstance = M.Datepicker.init(dpelem, {format:'yyyy-mm-dd'});
    var fselem = document.querySelector('select');
    var fsinstance = M.FormSelect.init(fselem, {});
    </script>
</body>
